import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import 'index.dart';

class RegistPage extends GetView<RegistController> {
  const RegistPage({super.key});

  // 构建表单
  Widget _buildForm() {
    return Column(
      children: [
        // 标题
        const Padding(
          padding: EdgeInsets.only(top: 20, bottom: 40),
          child: Text(
            '新用户注册',
            style: TextStyle(
              color: Colors.black,
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        
        // 手机号输入框
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
          child: TextField(
            keyboardType: TextInputType.phone,
            decoration: const InputDecoration(
              hintText: '请输入手机号码',
              border: UnderlineInputBorder(),
              prefixIcon: Icon(Icons.phone_android),
            ),
            onChanged: (value) {
              controller.state.phone.value = value;
              controller.validatePhone(value);
            },
          ),
        ),
        
        // 验证码输入框
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
          child: Row(
            children: [
              Expanded(
                child: TextField(
                  keyboardType: TextInputType.number,
                  decoration: const InputDecoration(
                    hintText: '请输入手机短信验证码',
                    border: UnderlineInputBorder(),
                    prefixIcon: Icon(Icons.security),
                  ),
                  onChanged: (value) {
                    controller.state.verifyCode.value = value;
                    controller.validateCode(value);
                  },
                ),
              ),
              Obx(() => TextButton(
                onPressed: controller.state.isSendingCode.value 
                    ? null 
                    : () => controller.sendVerifyCode(),
                style: TextButton.styleFrom(
                  backgroundColor: const Color(0xFFCB5050),
                  foregroundColor: Colors.white,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(20),
                  ),
                  padding: const EdgeInsets.symmetric(horizontal: 16),
                ),
                child: Text(
                  controller.state.isSendingCode.value 
                      ? '${controller.state.countdown.value}s' 
                      : '发送验证码',
                ),
              )),
            ],
          ),
        ),
        
        // 用户类型选择
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Expanded(
                child: Obx(() => ElevatedButton(
                  onPressed: () => controller.setUserType('personal'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: controller.state.userType.value == 'personal' 
                        ? const Color(0xFFCB5050) 
                        : Colors.grey.shade200,
                    foregroundColor: controller.state.userType.value == 'personal' 
                        ? Colors.white 
                        : Colors.black,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                    padding: const EdgeInsets.symmetric(vertical: 12),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.person,
                        color: controller.state.userType.value == 'personal' 
                            ? Colors.white 
                            : Colors.black,
                      ),
                      const SizedBox(width: 8),
                      const Text('个人'),
                    ],
                  ),
                )),
              ),
              const SizedBox(width: 20),
              Expanded(
                child: Obx(() => ElevatedButton(
                  onPressed: () => controller.setUserType('business'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: controller.state.userType.value == 'business' 
                        ? const Color(0xFFCB5050) 
                        : Colors.grey.shade200,
                    foregroundColor: controller.state.userType.value == 'business' 
                        ? Colors.white 
                        : Colors.black,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                    padding: const EdgeInsets.symmetric(vertical: 12),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.store,
                        color: controller.state.userType.value == 'business' 
                            ? Colors.white 
                            : Colors.black,
                      ),
                      const SizedBox(width: 8),
                      const Text('商家'),
                    ],
                  ),
                )),
              ),
            ],
          ),
        ),
        
        // 同意用户协议
        Padding(
          padding: EdgeInsets.symmetric(horizontal: 30.w, vertical: 10.h),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Obx(() => SizedBox(
                width: 18.w,
                height: 18.h,
                child: Checkbox(
                  value: controller.state.isAgreeTerms.value,
                  onChanged: (value) {
                    final isAgreed = value ?? false;
                    controller.state.isAgreeTerms.value = isAgreed;
                    controller.validateAgreement(isAgreed);
                  },
                  shape: const CircleBorder(),
                  activeColor: const Color(0xFFCB5050),
                  side: BorderSide(color: Colors.red, width: 1.w),
                ),
              )),
              SizedBox(width: 6.w),
              Expanded(
                child: Wrap(
                  crossAxisAlignment: WrapCrossAlignment.center,
                  spacing: 2.w,
                  runSpacing: 0,
                  children: [
                    Text('勾选同意', 
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.black87,
                        height: 1.2,
                      )
                    ),
                    TextButton(
                      onPressed: () => controller.showUserManual(),
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.symmetric(horizontal: 2.w),
                        minimumSize: Size.zero,
                        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      ),
                      child: Text(
                        '《用户手册》',
                        style: TextStyle(
                          color: Colors.black87, 
                          fontSize: 12.sp,
                          height: 1.2,
                        ),
                      ),
                    ),
                    Text('和', 
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: Colors.black87,
                        height: 1.2,
                      )
                    ),
                    TextButton(
                      onPressed: () => controller.showPrivacyPolicy(),
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.symmetric(horizontal: 2.w),
                        minimumSize: Size.zero,
                        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      ),
                      child: Text(
                        '《隐私政策》',
                        style: TextStyle(
                          color: Colors.black87, 
                          fontSize: 12.sp,
                          height: 1.2,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
        
        // 注册按钮
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
          child: Obx(
            () => ElevatedButton(
              onPressed: controller.canRegister
              ? () => controller.handleRegister()
              : null, // 当条件不满足时禁用按钮
            style: ElevatedButton.styleFrom(
              minimumSize: const Size(double.infinity, 50),
                backgroundColor: controller.canRegister 
                    ? const Color(0xFFCB5050) 
                    : Colors.grey.shade400,
              foregroundColor: Colors.white,
                disabledBackgroundColor: Colors.grey.shade400,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(25),
                ),
            ),
            child: controller.state.isLoading.value
              ? const CircularProgressIndicator(color: Colors.white)
                  : const Text('注册账号', style: TextStyle(fontSize: 18)),
            ),
        ),
        ),
      ],
    );
  }

  // 主视图
  Widget _buildView() {
    return SingleChildScrollView(
      child: Container(
        margin: const EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20),
        ),
        child: _buildForm(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 设置状态栏为透明，允许内容延伸到状态栏
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light,
    ));

    return Scaffold(
      backgroundColor: const Color(0xFFCB5050),
      resizeToAvoidBottomInset: false, // 阻止键盘将页面顶起
      extendBodyBehindAppBar: true,
      extendBody: true,
      body: SafeArea(
        top: false,
        child: Center(child: _buildView()),
      ),
    );
  }
}
